
button.close-hint-btn.btn.btn-illustrated.btn-danger
  span.glyphicon.glyphicon-remove

h1.text-center.hint-title(dir="auto")
  span(dir="auto")= view.state.get('hintsTitle')

.row.btn-area
  .col-md-4
    if view.state.get('hintIndex') > 0
      button.previous-btn.btn.btn-illustrated.pull-left(data-i18n="about.previous")
  .col-md-4
    h2.text-center.hint-pagination #{view.state.get('hintIndex')+1} / #{view.hintsState.get('total')}
  .col-md-4
    if view.state.get('hintIndex') < view.hintsState.get('total') - 1
      button.next-btn.btn.btn-illustrated.pull-right(data-i18n="play.next")

.hint-body(dir="auto")
  != view.getProcessedHint()

if view.showAiBotHelp
  .chatbot-help
    img.avatar(src='/images/level/baby-griffin.png' alt='AI')
    span(data-i18n="play.want_more_hints")
    button.btn.btn-illustrated.btn-primary.ai-help-button(data-i18n="play_level.problem_alert_ask_the_ai")
    if view.creditMessage
      img.chatbot-hint(src="/images/ozaria/teachers/dashboard/svg_icons/IconHint.svg" alt="Hint" data-container="body" data-toggle="popover" data-placement="right" data-content=view.creditMessage)

.clearfix
